<script>
export default {
  data(){
    return{
      tableData1: [],
      form:{},
      dz:{},
      tableDataOrder: [],
      zongjian:null,

    }
  },
  methods: {
    //获取地址
    find1() {
      var a = localStorage.getItem("dz");
      this.dz = JSON.parse(a);
      console.log("dz=" + this.dz);
      if (this.dz != null) {
        this.axios.post('http://localhost:9000/placeOrder/receiving-address/finddd?id='+this.dz).then(response => {
          this.tableData1 = response.data;
        }).catch(error => {
          console.error("请求错误:", error); // 错误处理
        });
      }
    },


    //选择地址
    sh(){
      this.$router.push('/Receiving_address');
    },

    //提交订单并保存
    tj(){
      this.form.rid=this.dz;
      this.form.oid=this.tableDataOrder[0].id;
      this.form.totalAmount=this.zongjia;
      this.axios.post('http://localhost:9000/placeOrder/confirm-order/add',this.form).then(response => {

      })
      localStorage.setItem("dd",JSON.stringify(this.zongjia));

      this.$router.push('/Place_order');
    },

    //获取订单信息
    findOrders(){
      this.axios.post('http://localhost:9000/placeOrder/receiving-address/findOrder').then(response => {
        this.tableDataOrder = response.data;
        this.zongjia=this.tableDataOrder[0].xj*this.tableDataOrder[0].sl;
      })
    },

    //数量减
    decrement() {
      if (this.tableDataOrder[0].sl >0){
        this.tableDataOrder[0].sl--;
        this.zongjia=this.tableDataOrder[0].xj*this.tableDataOrder[0].sl;
      }
    },

    //数量加
    increment() {
      this.tableDataOrder[0].sl++;
      this.zongjia=this.tableDataOrder[0].xj*this.tableDataOrder[0].sl;
    }
  },
  created(){
    this.find1();
    this.findOrders();
  }
}
</script>

<template>
  <div style="margin: 0 auto; background-color: #f2f2f2; width: 500px; height: 800px;  border-radius: 10px;">
    <div>
      <img src="https://spyx-10a.oss-cn-beijing.aliyuncs.com/2024/11/12/img.png" width="100%" height="30px" style="border-radius: 10px 10px 0 0;">
    </div>
    <img src="https://spyx-10a.oss-cn-beijing.aliyuncs.com/2024/11/12/%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_20241121155729.png" @click="fh()" style="padding-top: 20px;margin-left: 30px; width: 30px; height: 30px;  float: left;">
    <p style="text-align: center; font-size: 20px;padding: 20px 0;">确认订单</p>
    <div style="margin: 0 auto;background-color: #ffffff; width: 99%; height: 90px;overflow: hidden;">
      <img src="https://spyx-10a.oss-cn-beijing.aliyuncs.com/2024/11/12/%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_20241120200043.png" style="padding-top: 20px;margin-left: 30px; width: 50px; height: 50px;  float: left;">
      <div style="width: 70%; margin: 16px auto; float: left;text-align: left;" v-if="this.dz!=null">
        <p>
          <b style="font-size: 25px; margin: 8px;">{{tableData1[0].consignee}}</b>
          <b style="font-size: 15px; color: #a2a2a2;margin: 8px;">{{tableData1[0].phone}}</b>
          <span style="padding:4px;border-radius: 8px; background-color: #a2a2a2; font-size: 12px; color: white;margin: 8px;">{{tableData1[0].addressLabel}}</span>
        </p>
        <p style="font-size: 12px; color: #a2a2a2;margin: 8px;">
          {{tableData1[0].address}}{{tableData1[0].detailedAddress}}
        </p>
      </div>
      <div style="width: 70%; margin: 0 auto; float: left;" v-if="this.dz==null">
        <p style="font-size: 25px; margin-top: 25px;">请添加收货信息</p>
      </div>
      <img src="https://spyx-10a.oss-cn-beijing.aliyuncs.com/2024/11/12/%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_20241120200114.png" @click="sh()" style="padding-top: 30px;width: 30px; height: 30px;  float: right;">
    </div>
    <div style="width: 99%; height: 400px; background-color: white; margin: 0 auto; margin-top: 15px;overflow: hidden;">
      <div style="width: 100%; height: 50px; border: 1px solid #a2a2a2;">
        <p style="">1111</p>
      </div>
<!--      <el-upload-->
<!--          class="avatar-uploader"-->
<!--          action=""-->
<!--          name="file"-->
<!--          :show-file-list="false"-->
<!--          :on-success="handleAvatarSuccess"-->
<!--          :before-upload="beforeAvatarUpload">-->
<!--        <img width="50px" v-if="imageUrl" :src="imageUrl" class="avatar" style=" width: 500px; height: 500px; ">-->
<!--        <i v-else class="el-icon-plus avatar-uploader-icon"></i>-->
<!--      </el-upload>-->
      <div style="width: 100px; height: 100px; border: 1px solid #a2a2a2; float: left; margin-left: 30px; margin-top: 30px;"></div>

      <div style="float: left; width: 60%;text-align: left; border: 1px solid #a2a2a2; margin-left: 20px; font-size: 15px; margin-top: 30px;padding-bottom: 30px;">
        <p style="margin: 5px 0;">{{tableDataOrder[0].name}}</p>
        <span style="width: 100px;border-radius: 5px; background-color: #a2a2a2; font-size: 12px; color: white; padding: 5px; ">{{tableDataOrder[0].gg}}</span>
        <p style="font-size: 12px;margin: 5px 0; color: #a2a2a2;">{{tableDataOrder[0].fhsj}}</p>
        <p style="font-size: 12px;margin: 5px 0;">{{tableDataOrder[0].fw}}</p>
        <div>
          ￥<span style="font-size: 20px; margin-right: 100px;">{{tableDataOrder[0].xj}}</span>
          <el-button
              icon="el-icon-minus"
              circle
              @click="decrement"
              style="width: 40px;"
          ></el-button>
          <span>{{ tableDataOrder[0].sl }}</span>
          <el-button
              icon="el-icon-plus"
              circle
              @click="increment"
              style="width: 40px;"
          ></el-button>
        </div>
      </div>
      <div style="width: 100%; float: left;">

        <p style="text-align: left; margin-left: 30px; font-size: 14px;"><span>订单运费</span><span style="margin-left: 328px;">{{tableDataOrder[0].yd}}</span></p>
                <el-form ref="form" :model="form" label-width="80px" style="margin-left: 17px; ">
                  <el-form-item label="订单留言">
                    <el-input v-model="form.orderMessage"></el-input>
                  </el-form-item>
                </el-form>
      </div>
    </div>
    <div style="width: 99%; height: 50px;  margin: 0 auto; margin-top: 15px;">
      <p style="font-size: 12px; color: #a2a2a2;">提交订单即视为同意<a href="#" style="color: #2b2b2b;">《用户服务协议》</a><a href="#" style="color: #2b2b2b;">《隐私政策》</a>及同意小店将相应订单信息同步APP，您可在“订单”版块查询相应订单信息</p>
    </div>
    <div style="width: 99%; height: 81px;background-color: white; margin: 0 auto;text-align: left; ">
      <span style="float: left; margin: 25px 0 0 10px; font-size: 18px">￥<span style="font-size: 30px">{{this.zongjia}}</span></span>
      <el-button style="float: right; margin: 25px 10px 0 0; background-color: #2b2b2b; color: white; border: none; padding: 10px 20px; border-radius: 5px; " @click="tj()">提交订单</el-button>
    </div>
  </div>

</template>

<style>

</style>